<template>
  <!-- 饼图  -->
  <div ref="index" class="index"></div>
</template>
<script setup lang="ts">
import * as echarts from "echarts";
import { ref, reactive, watch, nextTick } from "vue";
// 接收值
let props = defineProps({
  carData: {
    type: Object,
    default: false,
  },
});
// 定义值
let index = ref(); //ref的应用
// 定义加载函数
let initCharts = () => {
  let chart = echarts.init(index.value);
  //props.carData
  let option = {
    title: [
      {
        text: "已完成",
        x: "center",
        top: "55%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 16,
          fontWeight: "100",
        },
      },
      {
        text: "75%",
        x: "center",
        top: "30%",
        textStyle: {
          fontSize: "40",
          color: "#FFFFFF",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600",
        },
      },
    ],
    backgroundColor: "#111",
    polar: {
      radius: ["92%", "82%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        name: "",
        type: "bar",
        roundCap: true,
        barWidth: 30,
        showBackground: true,
        backgroundStyle: {
          color: "rgba(66, 66, 66, .3)",
        },
        data: [60],
        coordinateSystem: "polar",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {
                offset: 0,
                color: "#16CEB9",
              },
              {
                offset: 1,
                color: "#6648FF",
              },
            ]),
          },
        },
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["66%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE",
        },
        data: [100],
      },
      {
        name: "",
        type: "pie",
        startAngle: 80,
        radius: ["78%"],
        hoverAnimation: false,
        center: ["50%", "50%"],
        itemStyle: {
          color: "rgba(66, 66, 66, .1)",
          borderWidth: 1,
          borderColor: "#5269EE",
        },
        data: [100],
      },
    ],
  };

  chart.setOption(option, true);
  // 当窗口大小改变时候，echarts重置大小
  window.addEventListener("resize", () => {
    chart.resize();
  });
};

// 监听当配置项发生变化的时候，调用加载函数
watch(
  () => props.carData,
  (val) => {
    if (Object.keys(val)) {
      nextTick(() => {
        initCharts();
      });
    }
  },
  { immediate: true }
);
</script>

<style scoped lang="less">
.index {
  width: 100%;
  height: 200px;
}
</style>
